<template>
	<div>
		<div class="shopcart">
			<div class="car-con" @click="toggleList">
				<div class="car-con-left">				
					<div class="j-cart-icon cart-icon">
	                    <i class="j-ico-cart ico-cart" :class="{'ico-cart-active':totalCount>0}"></i>  
	                    <div class="j-cart-num cart-num" v-show="totalCount>0">{{totalCount}}</div>
	                </div>				
					<div class="price" :class="{'price-active':totalPrice>0}">￥{{totalPrice}}</div>
					<div class="shopcart-desc">另需配送费￥{{deliveryPrice}}元</div>
				</div>
				<!--事件修饰符：.stop阻止默认事件冒泡-->
				<div class="car-con-right" @click.stop.prevent="pay">
					<div class="pay" :class="payClass">
						{{payDesc}}
					</div>			
				</div>
			</div>
			<transition name="fold">
				<div class="shopcart-list" v-show="listShow">
					<div class="car-list-header">
						<h1 class="car-list-tit">购物车</h1>
						<span class="car-empty" @click="empty">清空</span>
					</div>
					<div class="car-list-con" ref="listContent">
						<ul>
							<li class="car-list-food" v-for="food in selectFoods">
								<span class="car-list-name">{{food.name}}</span>
								<div class="car-list-price">
									<span>￥{{food.price*food.count}}</span>
								</div>
								<div class="cartcontrol-wrap2">
									<cartcontrol :food="food"></cartcontrol>
								</div>
							</li>
						</ul>
					</div>	
				</div>				
			</transition>
		</div>
		<transition name="fade">
			<div class="list-mask" v-show="listShow" @click="hideList"></div>
		</transition>
	</div>
</template>

<script>
	import cartcontrol from "../cartcontrol/cartcontrol"
	import BScroll from "better-scroll"
	
	
	export default{
		data(){
			return{
				fold:true
			}
		},
		//接收从goods传过来的属性
		props:{
			selectFoods:{
				type:Array,
				default(){
					return [
						{price:10,count:3}
					];
				}
			},
			deliveryPrice:{
				type:Number,
				default:0          
			},
			minPrice:{
				type:Number,
				default:0                                                           
			}
		},
		components:{
			cartcontrol
		},
		computed:{
			totalPrice:function(){
				let total = 0;
				this.selectFoods.forEach(function(food){
					total += food.price * food.count;
				})
				return total;
			},
			//选择商品的总数
			totalCount:function(){
				let count = 0;
				this.selectFoods.forEach(function(food){
					count += food.count;
				})
				return count;
			},
			//按钮文字内容变化
			payDesc:function(){
				if(this.totalPrice === 0){
					return '￥'+this.minPrice+'元起送';
				}else if(this.totalPrice < this.minPrice){
					let diffPrice = this.minPrice - this.totalPrice;
					return '还差'+diffPrice+'元起送';
				}else{
					return '去结算';
				}
			},
			//按钮样式变化
			payClass:function(){
				if(this.totalPrice >= this.minPrice){
					return 'enough';
				}else{
					return 'not-enough';
				}
			},
			listShow:function(){
				if(!this.totalCount){
					this.fold = true;
					return false;
				}
				let show = !this.fold;
				
				//初始化滚动事件
				if(show){
					this.$nextTick(function(){
						if(!this.scroll){
							this.scroll = new BScroll(this.$refs.listContent,{
								click:true
							})
						}else{
							this.scroll.refresh();
						}
					})
				}
				
				return show;
			}
		},
		methods:{
			toggleList:function(){
				if(!this.totalCount){
					return false;
				}
				this.fold = !this.fold;
			},
			empty:function(){
				this.selectFoods.forEach(function(food){
					food.count = 0;
				})
			},
			hideList:function(){
				this.fold = true;
			},
			pay:function(){
				if(this.totalPrice < this.minPrice){
					return; 
				}
				window.alert('需支付￥'+this.totalPrice+'元')
			}
		}
	}
</script>

<style>
	.shopcart{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 48px;
	}
	.car-con{
		display: flex;
		background: rgba(51,51,51,0.8);
		font-size: 0;
		color:rgba(225,225,225,0.4);
	}
	.car-con-left{
		flex: 1;
	}
	.cart-icon {
	    float: left;
	    position: relative;
	    top: -18px;
	    margin: 0 12px;
	}
	.ico-cart, .spec-ico-cart {
	    display: block;
	    width: 50px;
	    height: 57px;
		background: url(cart.png) no-repeat;
	    background-size: 50px auto;
	}
	.ico-cart {
	    background-position: 0 0;
	}
	.ico-cart-active{
	    background-position: 0 -57px;
	}		
	.cart-num {
	    border-radius: 50% 50%;
	    background-color: #FB4E44;
	    width: 15px;
	    height: 15px;
	    line-height: 16px;
	    font-size: 12px;
	    text-align: center;
	    position: absolute;
	    top: 2px;
	    right: 0;
	    color: #fff;
	    border: 1px solid #fff;
	}
	.price{
		display: inline-block;
		vertical-align: top;
		margin-top: 12px;
		line-height: 24px;
		padding-right: 12px;
		box-sizing: border-box;
		border-right: 1px solid rgba(255,255,255,0.1);
		font-size: 16px;
		font-weight: 700;
	}
	.price-active{
		color: #fff;
	}
	.shopcart-desc{
		display: inline-block;
		vertical-align: top;
		line-height: 24px;
		margin: 12px 0 0 12px;
		font-size: 10px;
	}
	.car-con-right{
		flex: 0 0 auto;
		width: 105px;
	}
	.pay{
		height: 48px;
		line-height: 48px;
		text-align: center;
		font-size: 12px; 
		font-weight: 700 ;
	}
	.not-enough{
		background: #535356;
	}
	.enough{
		background: #FFD161;
		color: #333;		
	}
	.shopcart-list{
		position: absolute;
		left: 0;
		bottom: 46px;
		z-index: -1;
		width: 100%;
	}
	.fold-enter-active {
	  animation: fold-in .5s;
	}
	.fold-leave-active {
	  animation: fold-out .5s;
	}
	@keyframes fold-in {
	  0% {
	    transform: translate3d(0, 100%, 0);
	  }
	  100% {
	    transform: translate3d(0, 0, 0);
	  }
	}
	@keyframes fold-out {
	  0% {
	    transform: translate3d(0, 0, 0);
	  }
	  100% {
	    transform: translate3d(0, 100%, 0);
	  }
	}
	.car-list-header{
		height: 40px;
		line-height: 40px;
		padding: 0 18px;
		background: #F3F5F7;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.car-list-tit{
		float: left;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.car-empty{
		float: right;
		font-size: 12px;
		color: rgb(0,160,220);
	}
	.car-list-con{
		padding: 0 18px;
		max-height: 217px; 
		overflow: hidden;
		background: #fff;
	}
	.car-list-food{
		position: relative;
		padding: 12px 0;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.car-list-name{
		line-height: 24px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.car-list-price{
		position: absolute;
		right: 90px;
		bottom: 12px;
		line-height: 24px;
		font-weight: 700;
		color: rgb(240,20,20);
	}
	.cartcontrol-wrap2{
		position: absolute;
		right: 0;
		bottom: 11px;
	}
	.list-mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 40;
		background: rgba(7,17,27,0.6);
	}
	/*最终状态*/
	.fade-transition{
		transition: all 0.5s; 
		opacity: 1;
		background: rgba(7,17,27,0.6);
	}
	/*初始状态*/
	.fade-enter,.fade-leave-active{
		opacity: 0;
		background: rgba(7,17,27,0);
	} 
</style>